<template>
  <div class="group-page">
    <!-- left-group-box start -->
    <div class="left-group-box" :class="{'unlock-group-active':!isGroupLocked}">
      <div class="top">
        <div>
          <el-checkbox v-model="allChecked" @change="changeAllCheck" :disabled="isGroupLocked"
                       :indeterminate="isIndeterminate">全选
          </el-checkbox>
          <i @click="changeLocked" :class="[isGroupLocked?'icon-locked':'icon-lock']"></i>
        </div>
        <i class="icon-add" @click="showGroupPop()" title="新增漫游组"></i>
        <i class="icon-delete1" @click="deleteCascadeList" title="删除"></i>
      </div>
      <transition-group :name="isGroupLocked?'':'drag-group'" class="btm ag-scrollbar">
        <p v-for="(item, index) in groupList" :key="item.id"
           :class="{'active':(curGroupId === item.id),'check-active':(item.checked && !isGroupLocked)}"
           :draggable="!isGroupLocked" @dragstart="dragstart(item)" @dragenter="dragenter(item,$event)"
           @dragend="dragend(item)">
          <el-checkbox v-model="item.checked" @change="changeCheck"></el-checkbox>
          <el-tooltip v-if="item.title.length>8" :content="item.title" placement="bottom-start" effect="dark">
            <span @click="changeGroup(item.id,index)" class="ellips">{{ item.title }}</span>
          </el-tooltip>

          <span v-else @click="changeGroup(item.id,index)" class="ellips">{{ item.title }}</span>
          <span class="icon-edit-span" v-show="isGroupLocked">
                        <i class="icon-edit" @click="showGroupPop(item,index)"></i>
                    </span>
        </p>
      </transition-group>
    </div>
    <!-- left-group-box end -->

    <!-- 新增重命名分组 -->
    <components class="classify-box" :is="compName" :title="(isAddGroup?'新增':'重命名')+'漫游组' " :rules="rules"
                :formLabel="formLabel" :form="form" @onConfirm="updateGroup" ref="AgPopForm">
    </components>
  </div>
</template>
<script>
import dirImageDataApi from '@/views/js/api/dirImageDataApi'

export default {
  props: {
    groupList: {
      type: Array,
      default() {
        return [];
      },
    },
    parentId: {
      type: String
    },
    dirId: {
      type: String
    }
  },
  data() {
    return {
      //表单
      isAddGroup: true,
      compName: '',
      form: {
        name: '',
      },
      formLabel: [{
        label: '名称',
        model: 'name',
        type: 'input',
      },],
      rules: {
        name: [{
          required: true,
          message: '请输入漫游组名称',
          trigger: 'blur',
        },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
      },

      //分类是否锁上
      isGroupLocked: true,
      //全选
      allChecked: false,
      //半选中
      isIndeterminate: false,
      //选中的数组
      checkedList: [],
      //拖拽data
      newData: {
        id: ''
      },
      //当前分组id
      curGroupId: ''
    }
  },
  watch: {
    dirId(val) {
      this.curGroupId = val;
    }
  },
  methods: {
    //全选
    changeAllCheck(val) {
      for (let i = 0; i < this.groupList.length; i++) {
        this.groupList[i].checked = this.allChecked;
      }
      if (val) {
        this.isIndeterminate = false;
        this.checkedList = this.groupList;
      } else {
        this.checkedList = [];
      }
    },
    changeCheck() {
      this.checkedList = this.groupList.filter(item => {
        return item.checked
      });
      let len = this.checkedList.length;
      if (0 < len && len < this.groupList.length) {
        this.allChecked = false;
        this.isIndeterminate = true;
      } else {
        if (len == this.groupList.length) {
          this.allChecked = true;
        }
        this.isIndeterminate = false;
      }
    },
    //切换分组
    changeGroup(id, index) {
      this.$emit("changeGroup", id);
      this.curGroupId = id;
    },
    //添加 || 编辑
    showGroupPop(item, index) {
      if (item) {
        this.form.id = item.id;
        this.form.name = item.title;
        this.isAddGroup = false;
      } else {
        this.form.name = '';
        this.isAddGroup = true;
      }

      if (this.compName != '') {
        this.$refs.AgPopForm.onShow()
      } else {
        import(`@/views/components/precut/AgPopForm.vue`).then((e) => {
          this.compName = e.default
        })
      }
    },

    //编辑添加新的分类
    async updateGroup(val) {
      let params = {
        imageStoreDirName: val.name,
        imageStoreDirParentId: this.parentId
      }
      if (!this.isAddGroup) {
        params.imageStoreDirId = this.form.id;
        let res = await dirImageDataApi.updateDirImage(params)
        if (res.success) {
          this.$message.success('编辑成功')
          this.$emit("updateList", this.form.id);
        }
      } else {
        let res = await dirImageDataApi.addDirImage(params)
        if (res.success) {
          this.$message.success('新增成功')
          this.$emit("updateList");
        }
      }
    },

    async deleteCascadeList() {
      let vm = this;
      let arr = this.checkedList;
      if (arr.length == 0) {
        return this.$message.info("请先勾选");
      }
      this.$confirm('你确定要删除选中的漫游组下所有的漫游吗？', '漫游组删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning',
        center: true,
      }).then(async () => {
        let ids = []
        for (let i = 0; i < this.checkedList.length; i++) {
          let id = this.checkedList[i].id;
          ids.push(id)
        }
        let res = await dirImageDataApi.deleteCascadeList(ids.toString())
        if (res.success) {
          this.$message.success('删除成功');
          this.$emit("updateList");
          this.checkedList = [];
          this.allChecked = false;
          this.isIndeterminate = false;
        } 
      }).catch(() => {
        // vm.$message.success('取消');
      });
    },

    changeLocked() {
      this.isGroupLocked = !this.isGroupLocked;
      this.allChecked = false;
      this.isIndeterminate = false;
      this.groupList.forEach((item) => {
        item.checked = false;
      })
    },

    dragstart(value) {
      this.oldData = value;
    },
    dragenter(value, e) {
      this.newData = value;
      // 'drag-active':(item.id == newData.id)

    },
    async dragend(value) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.groupList.indexOf(this.oldData)
        let newIndex = this.groupList.indexOf(this.newData)
        let newItems = [...this.groupList]
        newItems.splice(oldIndex, 1)
        newItems.splice(newIndex, 0, this.oldData)

        let arr = [];
        let max = oldIndex > newIndex ? oldIndex : newIndex;
        let min = oldIndex > newIndex ? newIndex : oldIndex;
        for (let i = min; i < max + 1; i++) {
          arr.push(newItems[i].id)
        }
        let res = await dirImageDataApi.dirDragSort(arr);
        if (res.success) {
          this.$emit("updateList");
          this.newData.id = '';
        }
      }

    },
  },
}
</script>

<style scoped src="../css/style.css"></style>
<style lang="less" scoped>
.left-group-box {
  width: 200px;
  border-right: 1px solid rgba(255, 255, 255, 0.53);
  height: 100%;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;

    .el-checkbox {
      margin-right: 8px;
    }
  }

  i:hover {
    cursor: pointer;
  }

  .btm {
    display: block;
    min-height: 300px;
    max-height: 400px;
    height: calc(100% - 64px);

    .drag-group-move {
      transition: transform 0.5s;

      p {
        background: #1e90ff;
      }
    }

    .icon-edit-span{
      position: relative;
    }
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 40px;
      cursor: pointer;
      padding: 0 12px 0 38px;
      user-select: none;

      /* &.drag-active {
          border-top: 1px solid #1e90ff;
      } */

      i {
        display: none;
        margin-left: 6px;
        position: absolute;
        margin: -10px 0px 0px 0px;
        right: 10px;
      }

      .el-checkbox {
        display: none;
        margin-right: 3px;
      }

      &.check-active {
        background: rgba(255, 255, 255, 0.35);
      }

      &:hover {
        background: rgba(255, 255, 255, 0.35);

        i {
          display: inline-block;
        }
      }

      &.active {
        background: #1e90ff;

      }

      .ellips {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 120px;
        display: inline-block;
        vertical-align: top;
      }
    }
  }

  .icon-delete1 {
    display: none;
  }

  &.unlock-group-active {
    .btm .el-checkbox {
      display: inline-block;
    }

    .icon-delete1 {
      display: inline-block;
    }

    .icon-add {
      display: none;
    }
  }
}

.classify-box {
  width: 400px;
  left: 50%;
  top: 30%;
}

::v-deep .is-disabled .el-checkbox__inner,
::v-deep .el-checkbox__inner {
  background: transparent;
}

::v-deep .el-checkbox__label {
  color: #fff;
}
</style>